<template>
  <div >
    <!-- 右键操作菜单 -->
    <!--<el-dropdown trigger="click" ref="itemOperDropdown" style="position: absolute">
      <span class="el-dropdown-link" id="itemOperListBtn" ref="itemOperListBtn"></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item key="0" @click.native="handleCopyItem">
          <a>复制</a>
        </el-dropdown-item>
        <el-dropdown-item key="1" divided @click.native="handleRemoveItem">
          <a>删除</a>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->

    <div style="height: calc(100% - 30px);overflow: hidden">
      <el-scrollbar style="height: 100%" :native="false" class="viewport" ref="viewport"
                    :view-style="viewStyle"
                    @wheel.prevent.native="handleMousewheel"
      >


        <div class="size-wrapper" :style="{transform: 'scale('+zoom/100+')'}">
          <div class="stage-container" :style="{
                  width: (pageInfo.width*3) + 'px',
                  height: (pageInfo.height*3) + 'px'
                  }"
               @mousedown.self="stageDrag=true"
               @mouseup="stageDrag = null"
               @mouseleave="stageDrag = null"
               @mousemove="onStageMouseMove"
          >
            <div class="bg" :style="{
                  backgroundImage: backgroundImage,
                  backgroundColor: pageInfo.backgroundColor,
            }">
              <div class="stage"
                   :style="{
                      width: pageInfo.width + 'px',
                      height: pageInfo.height + 'px',
                   }"
                   @drop="onComponentDrop"
                   @dragover.prevent
                   @mousedown.self="onStageMouseDown"
                   @mouseup="stageDrag = null"
                   @mouseleave="stageDrag = null"
                   @click.self="onStageSelect">

                <template v-for="item in widgetList" >
                  <component v-if="item.complex" :key="item.uuid"
                             :is="item.type" :val="item"
                             :zoom="zoom"
                             :pageInfo="pageInfo"
                             :active="activeElement.uuid === item.uuid"
                             @activated="onItemActivated(item)"
                             @contextmenu.native.stop.prevent="showOperList($event, item)"
                  ></component>

                  <vue-draggable-resizable v-else  ref="layer1VDR" :key="item.uuid"
                                           :style="{zIndex:item.z}"
                                           :active="activeElement.uuid === item.uuid"
                                           :draggable="item.draggable"
                                           :prevent-deactivation="true"
                                           :parent="true"
                                           :x="item.x"
                                           :y="item.y"
                                           :w="item.w"
                                           :h="item.h"
                                           :min-width="item.minWidth"
                                           :min-height="item.minHeight"
                                           :scale="zoom/100"
                                           :onDragStart="onDragStart(item)"
                                           @dragstop="onDragstop(item)"
                                           @resizestop="onResizestop(item)"
                                           @resizing="onItemResize"
                                           @dragging="onItemDrag"
                                           @mousedown.native="onItemActivated(item)"
                                           @contextmenu.native.stop.prevent="showOperList($event, item)"
                  >
                    <component :is="item.type" :val="item">
                      <vue-draggable-resizable ref="layer2VDR"
                                               v-for="child in getChildren(item.uuid)" :key="child.uuid"
                                               :style="{zIndex:item.z}"
                                               :active="activeElement.uuid === child.uuid"
                                               :draggable="child.draggable"
                                               :prevent-deactivation="true"
                                               :parent="true"
                                               :x="child.x"
                                               :y="child.y"
                                               :w="child.w"
                                               :h="child.h"
                                               :min-width="child.minWidth"
                                               :min-height="child.minHeight"
                                               :scale="zoom/100"
                                               :onDragStart="onDragStart(item)"
                                               @dragstop="onDragstop(item)"
                                               @resizestop="onResizestop(item)"
                                               @resizing="onItemResize"
                                               @dragging="onItemDrag"
                                               @mousedown.native.stop="onItemActivated(child)"
                                               @contextmenu.native.stop.prevent="showOperList($event, child)"
                      >
                        <component :is="child.type" :val="child"></component>
                      </vue-draggable-resizable>
                    </component>

                  </vue-draggable-resizable>
                </template>
              </div>
            </div>

          </div>
        </div>
      </el-scrollbar>
    </div>

    <div class="tools">
      <div class="zoom ">
        <span style="margin-right: 10px">缩放</span>
        <el-slider v-model="sliderVal" @input="doZoom" :min="zoomMin" :max="zoomMax"></el-slider>
      </div>
    </div>


  </div>
</template>
<script src="./index.js"></script>
<style lang="scss">
  .vdr {
    /*不显示边框*/
    border: none;
  }

  .vdr.active {
    /*选中时显示轮廓线，轮廓线比border好，不占空间*/
    outline: #1890ff solid thin
  }
</style>
<style lang="scss" scoped>
  .scroll-wrap {
    overflow: hidden !important;
  }

  .tools {
    height: 30px;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    padding: 0 20px;

    .zoom {
      width: 200px;

      .el-slider {
        width: 150px;
        display: inline-block;
      }

    }
  }

  .viewport {
    /*height: calc(100% - 30px);*/
    /*overflow: auto;*/
    position: relative
  }

  .tools {
    height: 30px;
  }

  .size-wrapper {
    position: absolute;
    transform-origin: left top 0;
    will-change: transform;
  }

  .stage-container {
    position: relative;
    overflow: hidden;
    background-color: #DEDEDE;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .stage {
    position: relative;
    outline: 1px solid #e9e9e9;

    transform-origin: center top;
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
  }

  .bg {
    background-color: #fff;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
  }


</style>
